<template>
  <div class="container">
    <div class="right">
      <div class="top">
        <el-menu
          :default-active="activeIndex2"
          class="el-menu-demo"
          mode="horizontal"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          @select="handleSelect"
        >
          <el-menu-item index="1">单站概览</el-menu-item>
        </el-menu>
      </div>
      <div>
        <el-button-group style="padding-top: 60px">
          <el-button>多站统计</el-button>
          <el-button>单站统计 </el-button>
        </el-button-group>
      </div>
      <div class="item">
        <span>站点：</span>
        <div>
          <el-input
            size="large"
            placeholder="请输入站点"
            style="padding-top: 10px"
          />
        </div>
        <!-- //时间选择器 -->
        <div class="block">
          <span class="demonstration"></span>
          <el-date-picker
            v-model="value1"
            type="datetimerange"
            range-separator="To"
            start-placeholder="Start date"
            end-placeholder="End date"
            size="large"
            style="margin-top: 13px"
          />
          <el-button size="large" type="primary" style="margin-left: 40px"
            >搜索</el-button
          >
          <el-button size="large" type="primary" style="margin-right: 40px"
            >导出
          </el-button>
        </div>

        <div class="bottom"></div>
      </div>
      <div>
        <div class="div div1">
          <div class="aa aa1">充电电费（元）</div>
          <el-table
            :data="tableData1"
            :header-cell-style="{
              borderTop: 'none',
              borderLeft: 'none',
              borderRight: 'none',
              color: 'blue',
            }"
            border
            style="width: 100%"
            :row-style="{ height: '50px' }"
            class="DDD customer-table"
          >
            <el-table-column fixed prop="serialnumber" label="序号" />
            <el-table-column prop="name" label="站点名称" />
            <el-table-column prop="sharpelectricity" label="尖电" />
            <el-table-column prop="phase" label="峰电" />
            <el-table-column prop="ordinarytelegram" label="平电" />
            <el-table-column prop="valleyelectricity" label="谷电" />
            <el-table-column prop="total" label="总计" />
          </el-table>
        </div>
        <div class="div div2">
          <div class="aa aa2">放电电费（元）</div>
          <el-table
            :data="tableData2"
            border
            style="width: 100%"
            :row-style="{ height: '50px', width: '60px' }"
            :header-cell-style="{
              borderTop: 'none',
              borderLeft: 'none',
              borderRight: 'none',
              color: 'blue',
            }"
            class="DDD"
          >
            <el-table-column prop="sharpelectricity" label="尖电" />
            <el-table-column prop="phase" label="峰电" />
            <el-table-column prop="ordinarytelegram" label="平电" />
            <el-table-column prop="valleyelectricity" label="谷电" />
            <el-table-column prop="total" label="总计" />
            <el-table-column prop="total" label="综合效率" />
          </el-table>
        </div>
        <div class="div div3">
          <div class="aa"></div>
          <el-table
            :data="tableData2"
            border
            style="width: 100%"
            :row-style="{ height: '50px', width: '60px' }"
            :header-cell-style="{
              borderTop: 'none',
              borderLeft: 'none',
              borderRight: 'none',
              color: 'blue',
            }"
            class="DDD"
          >
            <el-table-column prop="total" label="综合效率" width="250" />
          </el-table>
        </div>
      </div>
      <el-pagination
        small
        background
        layout="->,prev, pager, next"
        :total="50"
        class="mt-4"
      />
    </div>
  </div>
  <div>
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      :row-style="{ height: '50px', width: '60px' }"
      :show-header="false"
      class="DDD"
    >
      <el-table-column fixed prop="serialnumber" label="" width="100" />
      <el-table-column prop="name" label="" width="120" />
      <el-table-column prop="sharpelectricity" label="" width="100" />
      <el-table-column prop="phase" label="" width="100" />
      <el-table-column prop="ordinarytelegram" label="" width="100" />
      <el-table-column prop="valleyelectricity" label="" width="100" />
      <el-table-column prop="total" label="" width="150" />
      <el-table-column fixed prop="serialnumber1" label="" width="100" />
      <el-table-column prop="name1" label="" width="120" />
      <el-table-column prop="sharpelectricity1" label="" width="100" />
      <el-table-column prop="phase1" label="" width="100" />
      <el-table-column prop="ordinarytelegram1" label="" width="100" />
      <el-table-column prop="valleyelectricity1" label="" width="100" />
      <el-table-column prop="total1" label="" width="150" />
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'IncomeReport',
  data() {
    return {
      tableData: [
        {
          serialnumber: '',
          name: '总计',
          sharpelectricity: '1.12',
          phase: '12.12',
          ordinarytelegram: '100.12',
          valleyelectricity: '1.12',
          total: '300.34',
        },
      ],
      tableData1: [
        {
          serialnumber: '1',
          name: '津荣储能站1',
          sharpelectricity: '1.12',
          phase: '12.12',
          ordinarytelegram: '100.12',
          valleyelectricity: '1.12',
          total: '300.34',
        },
        {
          serialnumber: '',
          name: '',
          sharpelectricity: '',
          phase: '',
          ordinarytelegram: '',
          valleyelectricity: '',
          total: '',
        },
      ],
      tableData2: [
        {
          serialnumber: '',
          name: '',
          sharpelectricity: '',
          phase: '',
          ordinarytelegram: '',
          valleyelectricity: '',
          total: '',
        },
        {
          serialnumber: '',
          name: '',
          sharpelectricity: '',
          phase: '',
          ordinarytelegram: '',
          valleyelectricity: '',
          total: '',
        },
      ],
      tableData3: [
        {
          serialnumber: '',
          name: '',
          sharpelectricity: '',
          phase: '',
          ordinarytelegram: '',
          valleyelectricity: '',
          total: '',
        },
        {
          serialnumber: '',
          name: '',
          sharpelectricity: '',
          phase: '',
          ordinarytelegram: '',
          valleyelectricity: '',
          total: '',
        },
      ],
    }
  },
}
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: auto;
  background-color: #243340;
  display: flex;

  .right {
    flex: 1;
    background-color: #243340;

    display: flex;
    flex-direction: column;
    .top {
      height: 1px;
      background-color: #243340;
    }
    .item {
      font-size: 14px;
      align-items: center;
      display: flex;
      margin: 10px 0;
    }
    .bottom {
      flex: 1;
      background-color: #243340;
    }
    div .div {
      display: inline-block;
      // width: 32%;
      height: 500px;
      margin: 5px;
      background-color: #243340;
    }
    div .div::after {
      content: '';
      display: block;
      clear: both;
    }
    .div1 {
      background-color: #243340;
      width: 43%;
    }

    .div2 {
      background-color: #243340;
      width: 43%;
    }
    .div3 {
      background-color: #243340;
      width: 10%;
    }
    .div1,
    .div2,
    .div3 {
      float: left;
      border: 1px solid black;
    }
    .DDD {
      margin-top: 5px;
    }
  }
}
.aa {
  width: 100%;
  height: 20px;
  color: rgb(87, 114, 236);
  padding-top: 2px;
}
.aa1 {
  text-align: center;
}
.aa2 {
  text-align: center;
}
</style>
